<template>
  <div id="logo">
    <!-- nav部分 -->
    <div class="nav index">
      <div class="layui-container">
        <div class="nav-list">
          <button>
            <span></span>
            <span></span>
            <span></span>
          </button>
          <ul class="layui-nav" lay-filter>
            <li class="layui-nav-item layui-this">
              <a href="Home">首页</a>
            </li>
            <li class="layui-nav-item">
              <a href="Lmzx">联盟中心</a>
            </li>
            <li class="layui-nav-item">
              <a href="Lmjk">联盟近况</a>
            </li>
            <li class="layui-nav-item">
              <a href>每日一问</a>
            </li>
            <li class="layui-nav-item">
              <a href>联盟风云</a>
            </li>
            <li class="layui-nav-item">
              <a href>今日话题</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- banner部分 -->
    <div>
      <main class="page-content">
        <div class="card">
          <div class="content">
            <h2 class="title">学生会</h2>
            <p class="copy">看看这些美丽的山间旅行</p>
            <button @click="gotolink" class="btn">点击登录</button>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <h2 class="title">计算机协会</h2>
            <p class="copy">计划你的下一次海滩之旅</p>
            <button class="btn">点击登录</button>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <h2 class="title">App创意协会</h2>
            <p class="copy">这是你梦寐以求的沙漠</p>
            <button class="btn">点击登录</button>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <h2 class="title">大学生媒体中心</h2>
            <p class="copy">说真的，马上，今天就发射到外太空</p>
            <button class="btn">点击登录</button>
          </div>
        </div>
      </main>
    </div>

    <!-- main部分 -->
    <div class="main product">
      <div class="layui-container">
        <div class="content layui-row">
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img">
            <img src="static\img\计算机学生会2.jpg" />
          </div>
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
            <p class="label">计算机与软件工程$大数据学院学生会</p>
            <p class="detail">
              “建校便成立成立，学生会以“为学生服务，为老师分忧”为宗旨，从事学院各
              项活动的组织、安排、服务工作。学生会成员是由各级学生的精干力量，经过精心选拔组织而成。
              其下设有主席团、办公室、实践部、生活部、宣传部、学风建设部、体育部、文艺部、纪检部共九个部门。
              学生会以“团结、高效、诚信、创新”为理念。团结：指在主席团的领导下，学生会内部团结一致。各部门
              保持及时沟通，每个人负好自己的责任，保证各活动负责人对整个活动的掌握与调度。高效：讲究效率不拖沓，
              该办的事情迅速而稳妥的办成。诚信：注意保持学生会的形象，决不失信于学生与同学。创新：各部门在自己职能范围内，
              通过新思路新办法来改进自己的工作。杜绝停滞不前不思进取！”。
            </p>
          </div>
        </div>
        <div class="content layui-row">
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img">
            <img src="static\img\计算机协会log2.png" />
          </div>
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
            <p class="label">计算机协会</p>
            <p class="detail">
              计算机协会成立于2016年5月16日，主要围绕计算机相关各类学科竞赛和利用计算机相关
              知识服务大众展开活动。计算机协会作为安徽信息工程学院“五星社团”、“十佳社团”、“首
              届拟品牌社团”，设有理事会、办公室、教研部、策划宣传部、财务部、外联部、设计部、ACM部、
              互联网+部、信息安全部；除此之外还建立了一支技术团队——智能之翼实验室。协会一学年开展学
              科竞赛活动、学术讲座活动、专业培训活动总计二十余项，近年来组织的学科竞赛为学校斩获国家级、
              省级奖项达百余项。
            </p>
          </div>
        </div>
        <div class="content layui-row">
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img">
            <img src="static\img\App创意俱乐部log2.jpg" />
          </div>
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
            <p class="label">App创意俱乐部</p>
            <p class="detail">
              APP创意俱乐部成立于2018年5月4日，隶属于APP创意中心，依托于计算机与软件工程学院，
              是学院双创分中心重要组成实验室之一。实验室旨在为学生提供一个基于互联网产品进行创新创意
              的学习交流和团队研发环境，着力培养通过技术创新解决社会实际需求的能力，面向全校学生开放。
              同时通过举办APP创意大赛以及学生自主申请入驻等方式，将最优秀的APP创意引入中心，并组织专业
              团队进行研发，研发的成果将运用到学科竞赛及大学生创新创业等项目中。（图为APP创意俱乐部工
              作人员合照）
            </p>
          </div>
        </div>
        <div class="content layui-row">
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img">
            <img src="static\img\IT学风社log2.jpg" />
          </div>
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
            <p class="label">IT学风社</p>
            <p
              class="detail"
            >校大学生艺术团是学校五大组织之一，属校团委办公室管理。由拥有艺术特长和热爱艺术的学生共同组成的群众性艺术团体院级组织，主要负责主办学校举办各大型活动，也是一支活跃于我院艺术舞台的生力军</p>
          </div>
        </div>
        <div class="content layui-row">
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 layui-col-lg6 content-img">
            <img src="static\img\img\stv.jpg" />
          </div>
          <div class="layui-col-xs12 layui-col-sm6 layui-col-md5 layui-col-lg6 right">
            <p class="label">青年志愿者协会</p>
            <p class="detail">安徽信息工程学院青年志愿者服务队，坚持以“立足校园，服务社会”为服务理念，由志愿从事社会公益事业与社会保障事业的大学生组成的全院性学生组织。</p>
          </div>
        </div>
      </div>
    </div>
    <!-- footer部分 -->
    <div class="footer">
      <div class="layui-container">
        <p class="footer-web">
          <a href="http://www.ccyl.org.cn/">共青团中央</a>
          <a href="http://www.ccyl.org.cn/organs/institution/xxb/">团中央学校部</a>
          <a href="http://www.gdcyl.org/Index.html">安徽共青团</a>
          <a href="http://www.gdcyl.org/xxb/">安徽学联</a>
          <a href="http://www.qypt.com.cn/">安徽信息工程学院</a>
        </p>
        <div class="layui-row footer-contact">
          <div class="layui-col-sm2 layui-col-lg1">
            <img src="static\img\img\erweima.png" />
          </div>
          <div class="layui-col-sm10 layui-col-lg11">
            <div class="layui-row">
              <div class="layui-col-sm6 layui-col-md8 layui-col-lg9">
                <p class="contact-top">本站版权归晓涛及胖虎、小叶所有</p>
                <p class="contact-bottom">诚招合作伙伴，有意者请及时联系。QQ：1459289161</p>
              </div>
              <div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
                <p class="contact-top">
                  <span class="right">安徽省芜湖市安徽信息工程学院</span>
                </p>
                <p class="contact-bottom">
                  <span class="right">StudentCoucli@xiaotao;2020-4-20</span>
                </p>
              </div>
            </div>
            <a href>后台管理</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {};
  },
  methods: {
    gotolink() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)

      //指定跳转地址
      this.$router.replace("/Login");
    }
  },
  mounted() {
    //   注意进度条一栏element模块，否则无法进行正常渲染和功能操作
    layui.use("element", function() {
      var element = layui.element;
    });
  }
};
</script>

<style>
#logo {
  background: #aba396;
}
/*导航部分*/

.nav {
  width: 100%;
  height: 80px;
  box-shadow: 0 3px 3px 0 #ccc;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  overflow: hidden;
  transition: 0.3s;
}

/* .layui-container{
    height: 2760px;
} */

.page-content {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 1024px;
  margin: 0 auto;
  font-family: var(--font-sans);
}
@media (min-width: 600px) {
  .page-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 800px) {
  .page-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1),
    0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1),
    0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
  .card {
    height: 350px;
  }
}
.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
  transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
  transition: transform calc(var(--d) * 1.5) var(--e);
  transition: transform calc(var(--d) * 1.5) var(--e),
    -webkit-transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
.card:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0)),
    color-stop(11.7%, rgba(0, 0, 0, 0.009)),
    color-stop(22.1%, rgba(0, 0, 0, 0.034)),
    color-stop(31.2%, rgba(0, 0, 0, 0.072)),
    color-stop(39.4%, rgba(0, 0, 0, 0.123)),
    color-stop(46.6%, rgba(0, 0, 0, 0.182)),
    color-stop(53.1%, rgba(0, 0, 0, 0.249)),
    color-stop(58.9%, rgba(0, 0, 0, 0.32)),
    color-stop(64.3%, rgba(0, 0, 0, 0.394)),
    color-stop(69.3%, rgba(0, 0, 0, 0.468)),
    color-stop(74.1%, rgba(0, 0, 0, 0.54)),
    color-stop(78.8%, rgba(0, 0, 0, 0.607)),
    color-stop(83.6%, rgba(0, 0, 0, 0.668)),
    color-stop(88.7%, rgba(0, 0, 0, 0.721)),
    color-stop(94.1%, rgba(0, 0, 0, 0.762)),
    to(rgba(0, 0, 0, 0.79))
  );
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.009) 11.7%,
    rgba(0, 0, 0, 0.034) 22.1%,
    rgba(0, 0, 0, 0.072) 31.2%,
    rgba(0, 0, 0, 0.123) 39.4%,
    rgba(0, 0, 0, 0.182) 46.6%,
    rgba(0, 0, 0, 0.249) 53.1%,
    rgba(0, 0, 0, 0.32) 58.9%,
    rgba(0, 0, 0, 0.394) 64.3%,
    rgba(0, 0, 0, 0.468) 69.3%,
    rgba(0, 0, 0, 0.54) 74.1%,
    rgba(0, 0, 0, 0.607) 78.8%,
    rgba(0, 0, 0, 0.668) 83.6%,
    rgba(0, 0, 0, 0.721) 88.7%,
    rgba(0, 0, 0, 0.762) 94.1%,
    rgba(0, 0, 0, 0.79) 100%
  );
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);
  transition: -webkit-transform calc(var(--d) * 2) var(--e);
  transition: transform calc(var(--d) * 2) var(--e);
  transition: transform calc(var(--d) * 2) var(--e),
    -webkit-transform calc(var(--d) * 2) var(--e);
}
.card:nth-child(1):before {
  background-image: url("/static/img/1.jpg");
}
.card:nth-child(2):before {
  background-image: url("/static/img/2.jpg");
}
.card:nth-child(3):before {
  background-image: url("/static/img/3.jpg");
}
.card:nth-child(4):before {
  background-image: url("/static/img/4.jpg");
}

.content {
  position: relative;
  /* display: -webkit-box; */
  /* display: flex; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  padding: 1rem;
  -webkit-transition: -webkit-transform var(--d) var(--e);
  transition: -webkit-transform var(--d) var(--e);
  transition: transform var(--d) var(--e);
  transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e);
  z-index: 1;
}

.content > * + * {
  margin-top: 1rem;
}

.title {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.35;
}

.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
}
.btn:hover {
  background-color: #0d0d0d;
}
.btn:focus {
  outline: 1px dashed yellow;
  outline-offset: 3px;
}

@media (hover: hover) and (min-width: 600px) {
  .card:after {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  /* .content {
    -webkit-transform: translateY(calc(66% - 0.5rem));
            transform: translateY(calc(66% - 0.5rem));
  } */

  .content > *:not(.title) {
    /* opacity: 0; */
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
    -webkit-transition: opacity var(--d) var(--e),
      -webkit-transform var(--d) var(--e);
    transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e),
      -webkit-transform var(--d) var(--e);
  }

  .card:hover,
  .card:focus-within {
    -webkit-box-align: center;
    align-items: center;
  }
  .card:hover:before,
  .card:focus-within:before {
    -webkit-transform: translateY(-4%);
    transform: translateY(-4%);
  }
  .card:hover:after,
  .card:focus-within:after {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .card:hover .content,
  .card:focus-within .content {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .card:hover .content > *:not(.title),
  .card:focus-within .content > *:not(.title) {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: calc(var(--d) / 8);
    transition-delay: calc(var(--d) / 8);
  }

  .card:focus-within:before,
  .card:focus-within:after,
  .card:focus-within .content,
  .card:focus-within .content > *:not(.title) {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }
  .main.product .content .label {
    color: beige;
    font-size: 30px;
    line-height: 78px;
    margin-top: 32px;
  }
}
</style>